<template>
	<view class="white">
		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: '#FE7E00' }">
			<view class="slot-wrap flex align-center" style="color: #FFFFFF;">
				<text class="cuIcon-back" @click="Back"></text>
				订单详情
			</view>
		</u-navbar>
		<view class="main">
			<view class="main-top bg-orange">
				<view class="text-heat">{{detail.status_name}}</view>
				<!-- <view class="text-explain">订单会在30分钟之内自动关闭</view> -->
			</view>
			<view class="main-content-img " v-for="(goods,g_index) in get_goods_list" :key="g_index">
				<view class="flex">
					<image :src="goods.img" mode="aspectFill"></image>
					<view class="xingxi">
						<view class="name">{{goods.name}}</view>
						<!-- <view class="sm">{{vo.appointment}}</view> -->
						<view class="grey text-orange text-bold">¥<text>{{goods.price}}</text>

						</view>
					</view>
				</view>
				<view class="moneys">
					X{{goods.num}}
				</view>
			</view>
			<view class="jiage">
				<view class="u-flex justify-between">
					<view class="u-font-28">
						产品金额
					</view>
					<view class="u-font-24">
						￥<text class="u-font-28">{{detail.goods_money}}</text>
					</view>
				</view>
				<view class="u-flex justify-between">
					<view class="">
						优惠抵扣
					</view>
					<view class="">
						￥{{detail.dis_money}}
					</view>
				</view>
			</view>
			<view class="zhongjia u-flex justify-between text-bold">
				<view class="">
					实际支付
				</view>
				<view class="u-font-24 text-orange">
					￥<text class="u-font-36 ">{{detail.pay_money}}</text>
				</view>
			</view>
			<u-gap height="20" bg-color="#F5F5F5"></u-gap>
			<view class="main-bottom">
				<view class="information text-bold">
					<view>订单编号：{{detail.no}}</view>
					<view>下单时间：{{detail.create_time}}</view>
					<view v-if="!!detail.pay_time">支付时间：{{detail.pay_time}}</view>
					<view>备注：{{detail.remark}}</view>
				</view>
			</view>
		</view>
		<u-gap height="150"></u-gap>
		
		<view class="u-flex justify-end bottom">
			
			
			<view class="cu-btn round line-black" @click="handleOpt('del',detail)" v-if="get_user_handle_action.indexOf('del')>-1">
				删除订单
			</view>
			
			<view class="cu-btn round bg-orange" @click="handleOpt('receive',detail)" v-if="get_user_handle_action.indexOf('receive')>-1">
				确认收货
			</view>
			
			<view class="cu-btn round line-black" @click="handleOpt('cancel',detail)" v-if="get_user_handle_action.indexOf('cancel')>-1">
				取消订单
			</view>
			
			
			<button class="cu-btn round bg-orange" @click="handlePay" :loading="paySumibtLoading"
			 v-if="get_user_handle_action.indexOf('pay')>-1">去付款</button>
			
			
			<button class="cu-btn" open-type="contact" v-if="get_user_handle_action.indexOf('contact')>-1">咨询客服</button>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paySumibtLoading:false,
				id: 0,
				is_show: false,
				
				detail:{},
				
				modalName: null,
			}
		},
		computed: {
			get_user_addr(){
				return this.detail.user_addr||{}
			},
			get_goods_list(){
				return this.detail.goods_list||[]
			},
			get_goods_list_name(){
				return this.detail.goods_list.name||[]
			},
			get_user_handle_action() {
				return this.detail.handle_action || [];
			},
		},
		onLoad(options) {
			this.id = options.id || 0;
			this._initData();
		},
		onShow() {
			if (this.is_show) {
				this._initData();
			} else {
				this.is_show = true;
			}
		},
		methods: {
			_initData() {
				this.$u.http.post('/api/order/detail', {
					id:this.id
				}).then(({ data }) => {
					this.detail = data.detail||{}
				}).catch(()=>{
					
					
				})
			},
			
			Back(){
				uni.navigateBack({
				});
			},
			handlePay(){
				this.paySumibtLoading = true
				const that = this
				this.$u.http.post('/api/order/buyCoursePayInfo', {
					order_id:this.id,
					openid:this.vuex_openid,
				}).then(({ data }) => {
					this.paySumibtLoading = false
					
					let pay_info = data.info||{};
					let pay_obj = Object.assign({},pay_info,{
						success: function (res) {
							console.log('pay,..........success:' + JSON.stringify(res));
							that.$u.toast('支付成功')
							setTimeout(function(){
								that._initData(true)
							},1000)
							
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
							if(err.errMsg=='requestPayment:fail cancel'){
								that.$u.toast('已取消支付')
							}else{
								that.$u.toast('支付失败')
							}
						}})
					//唤醒支付
					console.log('pay_obj_______________',pay_obj)
					uni.requestPayment(pay_obj);
					
					
				}).catch(()=>{
					this.paySumibtLoading = false
					
				})
			},
			//提醒发货
			handleOpt(mode, index, order) {
				let that = this;
				let content = '';
				let url_path = '';
				let fun = () => {
					//刷新数据列表
					that._initData(true);
				};
				if (mode == 'del') {
					content = '确定删除该订单?';
					url_path = '/api/order/del';
					fun = function() {
						uni.navigateBack()
					};
				} else if (mode == 'cancel') {
					content = '确定取消该订单?';
					url_path = '/api/order/cancel';
			
			
				} else if (mode == 'receive') {
					content = '是否立即收货?';
					url_path = '/api/order/receive';
			
				} else if (mode == 'reminder') {
					content = '是否提醒商家?';
					url_path = '/api/order/reminder';
					fun = function({
						msg
					}) {
						that.$showToastNoIcon(msg)
					};
				}
			
				uni.showModal({
					title: '提示',
					content: content,
					success: (res)=> {
						if (res.confirm) {
							//发起请求
							that.$u.http.post(url_path, {
								id: this.id,
							}).then((v) => {
								console.log(v)
								fun(v);
							});
			
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.orange {
		color: #FF492E;
	}

	.padding {
		padding: 0 30rpx;
	}

	.main-top {
		width: 100%;
		height: 222rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 1;
	}

	.main-top image {
		width: 100%;
		height: 222rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.main-top view {
		color: #FFFFFF;
		padding: 0 30rpx;
	}

	.text-heat {
		font-size: 36rpx;
		font-weight: 800;
		margin-bottom: 12rpx;
	}

	.text-explain {
		font-size: 24rpx;
	}

	.position {
		display: flex;
		background-color: #FFFFFF;
		padding: 30rpx;
	}

	.position image {
		width: 32rpx;
		height: 32rpx;
	}

	.position view {
		font-size: 32rpx;
		margin-right: 40rpx;
		font-weight: 800;
	}

	.main-content-img {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		background-color: #FFFFFF;
		image {
			width: 170rpx;
			height: 170rpx;
			border-radius: 10rpx;
			margin: 10rpx;
		}
	}

	.xingxi {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20rpx;

		view {
			font-size: 26rpx;
		}

		.name {
			color: #333333;
			font-size: 30rpx;
		}

		.sm {
			font-weight: 400;
			color: #666666;
		}
	}

	.moneys {
		font-size: 26rpx;
		padding: 0 0 14rpx 32rpx;
	}

	.payment {
		display: flex;
		flex-direction: row-reverse;
		margin: 20rpx 20rpx 20rpx 20rpx;
		font-size: 28rpx;
	}

	.main-text {
		margin: 20rpx 0;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.main-text>view {
		display: flex;
		padding: 20rpx 0;
	}

	.main-text .main-text-bottom {
		justify-content: flex-end;
	}

	.main-text-bottom view {
		margin-left: 30rpx;
		font-weight: 800;
	}

	.main-bottom {
		background-color: #FFFFFF;
	}

	.information {
		padding: 20rpx;
		border-bottom: 2rpx #E8E8E8 solid;
	}

	.information view {
		color: #999999;
	}

	.information view+view {
		margin-top: 25rpx;
	}

	.bottom-select {
		display: flex;
		flex-direction: row-reverse;
		padding: 30rpx 20rpx;
	}

	.bottom-select button {
		width: 200rpx;
		height: 66rpx;
		line-height: 64rpx;
		border-radius: 70rpx;
		background-color: #CCCCCC;
		margin-left: 20rpx;
		padding: 0 25rpx;
		border: 0 !important;
		color: #FFFFFF;
	}
	.jiage{
		padding: 30rpx;
		color: #666;
		border-top: 2rpx solid #F4F4F4;
		border-bottom: 2rpx solid #F4F4F4;
		>view+view{
			margin-top: 26rpx;
		}
	}
	.zhongjia{
		padding: 30rpx;
		color: #333;
		border-bottom: 2rpx solid #F4F4F4;
	}
	.bottom{
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		box-shadow: 0px 0px 28rpx 2rpx rgba(111,111,111,0.14);
		.u-font-32{
			text{
				font-size: 60rpx;
			}
		}
		.cu-btn{
			width: 260rpx;
			height: 82rpx;
			margin-left: 22rpx;
		}
	}
</style>
